• 今天我們要來實作一個倒數計時器，完成這個需求的設計，你需要思考幾點:

1. 固定每秒發出一個訊號: interval(1000)
2. 將每秒的訊號轉變為1: map
3. 有一個變數counter，可以記錄著每秒-1的結果: scan
4. 當counter=0時，不再傳送任何數值: filter

stackblitz

import { interval, map, scan, filter } from 'rxjs';

// final countdown
const finalCountdown$ = interval(1000).pipe(
  map((val) => 1),
  scan((accum, current) => accum - current, 6),
  filter((val) => val >= 0)
);

// show on console
finalCountdown$.subscribe(console.log);
  
// 每秒印出
// 5
// 4
// 3
// 2
// 1

裝飾畫面:倒數完成，顯示訊息

stackblitz

import { interval, map, scan, filter } from 'rxjs';

// get element
const countdown = document.getElementById('countdown');
const message = document.getElementById('message');

// final countdown
const finalCountdown$ = interval(1000).pipe(
  map((val) => 1),
  scan((accum, current) => accum - current, 6),
  filter((val) => val >= 0)
);

// modify HTML
finalCountdown$.subscribe((val) => {
  countdown.innerHTML = `${val}`;
  if (!val) message.innerHTML = 'HAPPY NEW YEAR!!';
});

Recap

• 今天我們運用之前所學的3種RxJS Operator

1. interval
2. map
3. filter

• 學習RxJS就是將這些operator的組合多加練習使用，時間一久，大腦建立習慣，你就能輕送駕馭它囉
•